<template>
  <div class="app-container calendar-list-container">
    <!--标签页-->
    <template>
      <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
        <el-tab-pane :label="$t('financial.Cabinet_list')" name="first"></el-tab-pane>
        <el-tab-pane :label="$t('financial.Charging_list')" name="second"></el-tab-pane>
      </el-tabs>
    </template>
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-form :inline="true">
          <el-form-item :label="$t('financial.Cabinet_number')">
            <el-input @keyup.enter.native="handleFilter" clearable v-model="listQuery.equipmentId" style="width: 200px;" class="filter-item" :placeholder="$t('financial.Please_enter_the_device_number')" >
            </el-input>
           </el-form-item>
        <el-form-item :label="$t('financial.Accumulated_using_time')">
         <el-input placeholder="" v-model="listQuery.startTime" style="width:90px;" clearable></el-input>-
          <el-input placeholder="" v-model="listQuery.endTime" style="width:90px;" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Activation_time')">
           <el-date-picker
              v-model="listQuery.date"
              type="datetimerange"
              :range-separator="$t('financial.to')"
              :start-placeholder="$t('financial.Start_date')"
              :end-placeholder="$t('financial.End_date')"
              value-format="timestamp">
            </el-date-picker>
        </el-form-item>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('financial.Find')}}</el-button>
      </el-form>          
    </div>
   <!-- table 表格 -->
    <el-table  :data="list" v-loading="loading.list" :element-loading-text="$t('financial.give_me_time')" border fit highlight-current-row
      style="width: 100%">
      <el-table-column  :label="$t('financial.Number')" prop="index" />
      <el-table-column  :label="$t('financial.Cabinet_number')" prop="equipmentId"/>
      <el-table-column  :label="$t('financial.Cabinet_name')" prop="equipmentName"/>
      <el-table-column  :label="$t('financial.Carbinet_model')" prop="slotSum"/>
      <el-table-column  :label="$t('financial.current_location')" prop="area" />
      <el-table-column  :label="$t('financial.Address')" prop="address" />
      <el-table-column  :label="$t('financial.Accumulated_using_time')" prop='hourage'>
        <template slot-scope="scope">
          <span v-if="scope.row.hourage">{{scope.row.hourage}}{{$t('financial.hour')}}</span>
           <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Activation_time')" prop='ctime'>
        <template slot-scope="scope">
          <span v-if="scope.row.ctime">{{scope.row.ctime | parseTime}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getEquipmentList } from '@/api/financial'
export default {
  name: 'financial_back',
  components: {
    CountTo,
  },
  data() {
    return {
      total: 0,
      parameter: '',
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        equipmentId: '',
        startTime: '',
        endTime: '',
        date: ''
      },
      value: '',
      list: null,
      loading: {
        list: false,
        download: false
      },
       activeName2: 'first'
    }
  },
 
  created() {
    this.getEquipmentLists()
  },
  methods: {
   // 获取设备列表
    async getEquipmentLists() {
      this.loading.list = true
      try {
        const { data } = await getEquipmentList(this.filters)
        this.list = data.records.map((item, index) => ({
          index: index + 1,
          ...item
        }))
        this.total = data.total
        console.log(data)
      } catch (error) {        
      }
      this.loading.list = false     
    },
    handleFilter() {
      this.listQuery.pageNo = 1
     this.getEquipmentLists()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getEquipmentLists()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getEquipmentLists()
    },
    formatDate(date, offset){
      if(date && typeof date  == 'object' ){
          const d = date[offset];
          return new Date(d).getTime()
      }
      return ''
    },
    handleClick(tab, event) {
        if(tab.name == 'second') {
          this.$router.push('/financial/battery')
        }
    }
  },
  computed: {
    filters() {
      return {
        equipmentId: this.listQuery.equipmentId,
        startCtime: this.listQuery.date ? this.listQuery.date[0]:'',
        endCtime: this.listQuery.date ? this.listQuery.date[1]:'',
        startTime: this.listQuery.startTime,
        endTime: this.listQuery.endTime,
        pageNo: this.listQuery.pageNo,
        pageSize: this.listQuery.pageSize,
      }
    },
  }
}
</script>
